<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/fonts/order.css"></link>
	</head> 

	<body>
		<div class="mui-content" style="position: fixed;height: 100%; width: 100%;">
			<div id="orderTitle"> 
				<a id="tryBack"><img src="imges/back_arrow.png" style="width: 0.3rem; margin-top: 0.47rem; margin-left: -9.3rem; position: relative;"/></a>
				<div class="My_Oder">My order</div>
			</div>
			
			<div class="greenBgreyT">
				<div id="greenlineBlock">
					<div class="greenBlock greenBlock_left" align="center">
						<img src="imges/ic-tick.png" style="width: 0.5rem; margin-top: 0.25rem;"/>
					</div>
					
					<img src="imges/greenLine.png" style="width: 32%;height: 0.05rem; margin-top: 0.7rem;"/>
					<div class="greenBlock" align="center">
						<img src="imges/ic-tick.png" style="width: 0.5rem; margin-top: 0.25rem;"/>
					</div>	
					
					<img src="imges/div.png" style="width: 32%;height: 0.05rem; margin-top: 0.7rem;"/>
					<div class="greenBlock greenBlock_end">
						<div class="_3">3</div>
					</div>				
				</div>
				<div class="greyT">
					<div class="blockText" style="margin-left:5%;">Preview</div>
					<div class="blockText" style="margin-left:29%;">Confirm</div>
					<div class="blockText" style="margin-left:27%;">Successful</div>
				</div>
			</div>
			<div id="orderCenter" align="center">
				<!--<div class="detitaldiv">
					<div><img src="imges/cai.png" style="width: 2.5rem; height: 2.4rem; margin-top: 0.05rem;"/></div>
					<div class="detitaldivdiv">
						<div id="ot1">Steamed Checken w.Broccoli & Snow Peas</div>
						<div id="ot2">Com bo3,combo 4</div>
						<div id="ot3">$13</div>
					</div>
					<div class="detitalBu">
						<div id="buT" style="margin-left: 1rem; margin-top: 0.05rem;">x1</div>
					</div>
				</div>-->
			</div>
			
			<div id="orderFeet">
				<div id="inOrderFeet" style="padding-top: 0.2rem;">
					<div class="Grand_total">Grandtotal</div>
					<div id="pA" class="doller">$ </div>
					<div class="feetButton">
						<div id="tryBack2" class="greyButton feetBuText">BACK</div>
						<div id="goOn" class="orangeButton feetBuText">CONFIRM</div>
					</div>
				</div>
			</div>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			document.addEventListener('DOMContentLoaded', function() {
				var html = document.documentElement;
				var windowWidth = html.clientWidth;
				var returnData;
				html.style.fontSize = windowWidth / 10.8 + 'px';
			}, false);
			
			mui.plusReady(function() {
				var StoreId = localStorage.getItem("StoreId");
				var data = localStorage.getItem("jsonkey");
				var totalCount = localStorage.getItem("total");
				if(StoreId == null) {
					mui.openWindow({
						url: 'login.html'
					});
				} else {
					returnData = JSON.parse(data);
					console.log(data);
					var element = document.getElementById("orderCenter");
					for (i = 0; i < returnData.length; i++) {
						var para = document.createElement("div");
						if(returnData[i][0]!=""){
							para.innerHTML = 
								'<div class="detitaldiv">' +
									'<div><img src="'+ returnData[i][4] +'" style="width: 2rem; height: 2.2rem; margin-top: 0.13rem; margin-left: 0.2rem;"/></div>' +
									'<div class="detitaldivdiv">' +
										'<div id="ot1">'+ returnData[i][0] +' / '+ returnData[i][1] +'</div>' +
//										'<div id="ot2">'+ returnData[i][7] +'</div>' +
										'<div id="ot2">It hard to get rid of mison</div>' +
										'<div id="ot3">$ '+ returnData[i][3] * returnData[i][2] +'</div>' +
									'</div>' +
									'<div class="detitalBu">' +
										'<div id="buT" style="margin-left: 1rem; margin-top: 0.05rem;">x'+ returnData[i][2] +'</div>' +
									'</div>' +
								'</div>';
						}						
						element.appendChild(para);
					}
					var pA = document.createTextNode(totalCount);
					document.getElementById("pA").appendChild(pA);	
				}
			});
			
			tryBack.onclick = function() {
				var tryBack = document.getElementById("tryBack");
				mui.back();
			}
			
			document.getElementById('tryBack2').addEventListener('tap', function() {
				mui.back();
			});
			document.getElementById('goOn').addEventListener('tap', function() {
				window.location = 'sccessful.html';
			});
		</script>
	</body>

</html>